<template>
  <div class="OpenSchool">
    <h3>
      <div></div>开设学校
    </h3>
   
    <!-- <div class="Open_button">
      <div class="Datas_Situation">
        <el-dropdown split-button type="primary" @command="handleYear">
          {{year}}
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="2017">2017</el-dropdown-item>
            <el-dropdown-item command="2018">2018</el-dropdown-item>
            <el-dropdown-item command="2019">2019</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown split-button type="primary" @command="handleCity">
          {{ctye== "0001" ? "河北" : "北京"}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="0001">河北</el-dropdown-item>
            <el-dropdown-item command="0002">北京</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>-->
    <div class="Open_School">
      <div class="School_lists">
       
        <div class="lists" v-for=" tiem in schoolLists.list" :key="tiem.schoolId">
          <div class="left_lists">
            <img :src="tiem.logoUrl" alt />
            <span>{{tiem.schoolName}}</span>
          </div>
          <div class="left_right">
            <i class="iconfont">&#xe733;</i>
          </div>
        </div>
      </div>
      <div class="addButton" @click="addschoolList()" v-if=" totalCount+1 > pageSize">
          点击获取更多
      </div>
       <div class="addButton"  >
          没有更多了
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OpenSchool",
  data() {
    return {
      year: "2018",
      city: "0001",
      pageNow:1,
      schoolLists:"",
      pageSize:20,
      totalCount:"",
      majorId:''
    };
  },
  methods: {
    handleYear(command) {
      this.year = command;
    },
    handleCity(command) {
      this.city = command;
    },
    
    addschoolList(){
      
      this.pageSize += 10
      this.getSchoolList()
    },
    getSchoolList() {
       
      this.$ajax({
      
        method: "POST",
        url: "/api/major/guess/university",
        data: {
          majorId: this.$route.query.majorId,
          pageNow: this.pageNow,
          pageSize:  this.pageSize,
          provinceId: "",
          schoolType: ""
        },
        success: res => {
          if (res.data.code == 0) {
            this.schoolLists = res.data.data;
            this.totalCount = res.data.data.totalCount;
            this.majorId=this.$route.query.majorId
          }
        }
      });
    }
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.getSchoolList();
    });
  },
   watch:{   //监听路由变化
    $route(to,from){  
       if(this.$route.query.majorId==undefined){
         console.log(this.$route.query.majorId,77777777)
          this.schoolLists ='',
          this.totalCount=''
      }else{
      //  console.log(this.$route.query.majorId),
       this.majorId=this.$route.query.majorId
       console.log(to,from)
      //       console.log(from.query.majorId)
      //         if(to.fullPath=="/MajorDeatil/Deatils"){
      //           this.majorId= from.query.majorId
      //         }
      //         if(from.fullPath=="/MajorDeatil/Deatils"){
      //           this.majorId= to.query.majorId
      //         }
      // //  console.log(this.major)

        // to , from 分别表示从哪跳转到哪，都是一个对象
        // to.path  ( 表示的是要跳转到的路由的地址 eg: /home );
          this.$ajax({
      
        method: "POST",
        url: "/api/major/guess/university",
        data: {
          majorId: this.$route.query.majorId,
          pageNow: this.pageNow,
          pageSize:  this.pageSize,
          provinceId: "",
          schoolType: ""
        },
        success: res => {
          if (res.data.code == 0) {
            this.schoolLists = res.data.data;
            this.totalCount = res.data.data.totalCount;
            this.majorId=this.$route.query.majorId
          }
        }
      });

      }
     }
}
};
</script>

<style lang="scss" >
.OpenSchool {
  background: #ffffff;

  border-radius: 10px;
  width: 100% -136px;
  padding: 0 68px;
  padding-top: 42px;
  margin-bottom: 110px;
  padding-bottom: 240px;
  > h3 {
    display: flex;
    padding-bottom: 24px;
    font-size: 14px;
    div {
      background: #2e86ff;
      height: 16px;
      width: 6px;
      border-radius: 2px;
      margin-right: 14px;
      position: relative;
      top: -2px;
    }
  }
  .Datas_Situation {
    padding-bottom: 26px;
    .el-button-group {
      margin-right: 22px;
    }
    .el-button--primary {
      color: #818181;
      background: #f8f8f8;
      border-color: #f8f8f8;
      span {
        width: 78px;
      }
    }
    .el-dropdown .el-dropdown__caret-button::before {
      background: rgba(70, 220, 233, 0.5);
    }
    .el-dropdown .el-dropdown__caret-button:hover {
      border-left-color: rgba(70, 220, 233, 0.5);
      height: 100%;
    }
  }
  .Open_School {
    .School_lists {
      width: 100%;
      .lists {
        width: 100% -52px;
        display: flex;
        justify-content: space-between;
        background: #f8f8f8;
        padding: 24px 36px;
        border-radius: 10px;
        margin-bottom: 12px;
        .left_lists {
          img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            top: 4px;
          }
          span {
            padding-left: 6px;
            color: #414141;
          }
          i {
            padding-left: 24px;
            color: #878787;
          }
        }
        .left_right {
          transform: rotate(-90deg);
          color: #d2d2d2;
        }
      }
    }
  }
  .addButton{
    width: 200px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
    color: #a6a6a6;
    cursor: pointer;
  }
}
</style>